<template>
  <view class="app-container">
    <image class="background" src="/static/images/background.png" mode="aspectFill" :style="background_height"></image>
    <image class="top" src="https://www.xidaola1314.com/static/indexTop/new_top.png" mode="aspectFill"></image>

    <view class="main-box">
      <swiper class="swiper" indicator-active-color="$main-color" :indicator-dots="true" :autoplay="true" interval="3000" duration="500">
        <swiper-item v-for="(item, index) in banner_list" :key="index" @click="hrefObj(item.type, item.to_id)">
          <image :src="item.img" mode="aspectFill" class="slide-image"></image>
        </swiper-item>
      </swiper>

      <block v-if="applet_version == 1">
        <view class="tj-text">推 荐</view>
        <view class="info-box" @click="goUserDetail(recommend_user_list[0].id)">
          <view class="info">
            <image class="avatar" mode="aspectFill" :src="recommend_user_list[0].avatar"></image>
            <view class="right">
              <view class="line">
                <view class="name">{{ recommend_user_list[0].username }}</view>
                <image class="sex-img" mode="aspectFill" :src="item.gender == '男' ? '/static/images/sex1.png' : '/static/images/sex2.png'"></image>
              </view>
              <view class="line">
                {{ recommend_user_list[0].residence }}
              </view>
              <view class="line">
                <view class="icon" v-if="recommend_user_list[0].age">{{ recommend_user_list[0].age }}岁</view>
                <view class="icon" v-if="recommend_user_list[0].height">{{ recommend_user_list[0].height }}cm</view>
              </view>
              <view class="line">
                <view class="icon" v-if="recommend_user_list[0].marital_status">{{ recommend_user_list[0].marital_status }}</view>
                <view class="icon" v-if="recommend_user_list[0].annual_income">{{ recommend_user_list[0].annual_income }}</view>
              </view>

              <block v-if="recommend_user_list[0].hobby_str && recommend_user_list[0].hobby_str != 'null'">
                <view class="line text">爱好：</view>
                <view class="hobby-box">
                  {{ recommend_user_list[0].hobby_str }}
                </view>
              </block>
            </view>
          </view>
          <view class="find" v-if="recommend_user_list[0].xm_str">
            <view class="text">寻觅：</view>
            <view>{{ recommend_user_list[0].xm_str }}</view>
          </view>
        </view>

        <view class="more-box">
          <view class="btn" @click="more">点击查看更多</view>
        </view>
      </block>
    </view>

    <button class="share-btn" open-type="share" plain>
      <view class="share-view">
        <img class="share-icon" src="/static/images/share-icon.png" />
        <text>分享</text>
      </view>
    </button>

    <CustomTabBar :tabList="tabList" :currentTab="currentTab" @change="changeTab"/>
  </view>
</template>

<script>
import http from '@/utils/http'

export default {
  data() {
    return {
      top_img: '',
      tabList: [],
      currentTab: '',
      // 默认按照 devicePixelRatio === 3 来设置
      swiper_top: '20%',
      list_box_height: '50%',
      // 默认按照 devicePixelRatio === 3 来设置
      banner_list: [],
      recommend_user_list: [],
      applet_version: -1,
      background_height: 'height: 100vh;',
    };
  },
  created() {
    var tab_list = uni.getStorageSync('tab_list');
    if (tab_list) this.tabList = tab_list;

    this.getTabList(); // 获取 TabList
  },

  onShow() {
    var user_id = uni.getStorageSync('user_id') ? uni.getStorageSync('user_id') : 0;
    if (user_id == 0) uni.hideShareMenu();  // 隐藏系统分享按钮
  },
  onShareAppMessage() {
    var user_id = uni.getStorageSync('user_id') ? uni.getStorageSync('user_id') : 0;
    return {
      title: '喜到啦诚邀您的加入',
      path: '/pages/index/index?scene=' + user_id,
      imageUrl: http.config.baseURL + '/static/xcx/share.png'
    };
  },

  onLoad: function (options) {
    this.$http.post('/index/Api/getAppletVersion2').then(res => {
      this.applet_version = parseInt(res.data.data);
    })

    this.$http.post('/index/Api/getTopImg').then(res => {
      this.top_img = res.data.data;
    })

    var user_id = uni.getStorageSync('user_id') ? uni.getStorageSync('user_id') : 0,
      scene_user_id = options.scene ? options.scene : uni.getStorageSync('scene_user_id');// 分享人的user_id

    if (scene_user_id > 0) {
      uni.setStorageSync('scene_user_id', scene_user_id);
      if (user_id > 0) {
        this.$http.post('/index/Api/bindUser', {user_id, scene_user_id}).then(res => {
          if (res.data.result === 1) {
            uni.removeStorageSync('scene_user_id')
          }
        })
      }
    }

    let {devicePixelRatio} = uni.getSystemInfoSync();
    if (devicePixelRatio === 2) {
      this.swiper_top = '18%';
      this.list_box_height = '45%';
      this.background_height = 'height: 110vh;'
    }

    this.$http.post('/index/Api/indexBanner').then(res => {
      this.banner_list = res.data.data;
    });

    this.$http.post('/index/Api/indexRecommendUserList', {user_id}).then(res => {
      if (res.data.result === 1) {
        this.recommend_user_list = res.data.data
      }
    })
  },

  methods: {
    getTabList() {
      this.$http.post('/index/Api/getTabbar').then(res => {
        if (JSON.stringify(this.tabList) !== JSON.stringify(res.data.data)) {
          uni.setStorageSync('tab_list', res.data.data);
          this.tabList = res.data.data;
        }
        // 默认选中的 Tab
        this.currentTab = this.tabList[0].path;
      });
    },
    changeTab(path) {
      this.currentTab = path;
      uni.redirectTo({url: path}); // 切换到指定的页面
    },

    hrefObj: function (type, id) {
      if (type == 1) {
        var url = '/pages/article/article?id=' + id;
      } else {
        var url = '/pages/service_detail/service_detail?id=' + id;
      }
      uni.navigateTo({
        url: url
      })
    },

    goUserDetail: function (look_user_id) {
      uni.navigateTo({
        url: '/pages/user_details/user_details?user_id=' + look_user_id
      })

      /*var user_id = uni.getStorageSync('user_id') ? uni.getStorageSync('user_id') : 0;
      if(user_id){
        uni.navigateTo({
          url: '/pages/user_details/user_details?user_id=' + look_user_id
        })
      }else{
        uni.showLoading({
          title: '自动登录中...',
          mask: true
        })

        uni.login({
          success: result => {
            var code = result.code;

            this.$http.post('/index/Api/openidToUserid', {code}).then(res => {
              uni.hideLoading();
              if (res.data.result === 1) {
                var user_id = res.data.data;
                uni.setStorageSync('user_id', user_id)
                uni.navigateTo({
                  url: '/pages/user_details/user_details?user_id=' + look_user_id
                })
              } else {
                this.show_login = true;
              }
            })
          }
        })
      }*/
    },

    more: function () {
      var user_id = uni.getStorageSync('user_id') ? uni.getStorageSync('user_id') : 0;
      uni.navigateTo({
        url: '/pages/search/search'
      })
      /*if(user_id){
        uni.navigateTo({
          url: '/pages/search/search'
        })
      }else{
        uni.showLoading({
          title: '自动登录中...',
          mask: true
        })

        uni.login({
          success: result => {
            var code = result.code;

            this.$http.post('/index/Api/openidToUserid', {code}).then(res => {
              uni.hideLoading();
              if (res.data.result === 1) {
                var user_id = res.data.data;
                uni.setStorageSync('user_id', user_id)
                uni.navigateTo({
                  url: '/pages/search/search'
                })
              } else {
                this.show_login = true;
              }
            })
          }
        })
      }*/
    },
  }
};
</script>

<style lang="scss">
.app-container {
  .top {
    width: 100%;
    height: 310rpx;
  }

  .main-box {
    width: 100vw;
    padding: 0 20rpx;
    margin-top: 20rpx;

    .swiper {
      width: calc(100% - 40rpx);
      height: 300rpx; /* 设置轮播图高度 */
      border-radius: 20rpx; /* 设置圆角 */
      overflow: hidden; /* 确保子元素超出部分被隐藏 */

      .slide-image {
        width: 100%;
        height: 100%;
      }
    }

    .tj-text {
      font-size: 42rpx;
      color: #8C2D26;
      margin: 20rpx 0;
      font-weight: bold;
    }

    .text {
      font-size: 32rpx;
      font-weight: bold;
      flex-shrink: 0;
    }

    .info-box {
      background: $main-background;
      border-radius: 20rpx;
      width: calc(100% - 80rpx);
      padding: 20rpx;

      .info {
        display: flex;
        justify-content: space-between;

        .avatar {
          width: 340rpx;
          height: 340rpx;
          flex-shrink: 0;
          border-radius: 20rpx;
        }

        .right {
          width: calc(100% - 400rpx);
          display: flex;
          flex-direction: column;

          .line {
            display: flex;
            justify-content: space-between;
            margin-top: 17rpx;
            width: 100%;

            .name {
              font-size: 40rpx;
              font-weight: bold;
            }

            .sex-img {
              width: 46rpx;
              height: 46rpx;
            }

            .icon {
              font-size: 24rpx;
              padding: 2rpx 20rpx;
              border: 2rpx solid $main-color;
              border-radius: 40rpx;
              color: #B43C33;
            }
          }

          .hobby-box {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }

      .find {
        display: flex;
        align-items: center;
        margin-top: 20rpx;
      }
    }

    .more-box {
      display: flex;
      justify-content: center;
      width: calc(100% - 40rpx);
      margin-top: 40rpx;

      .btn {
        padding: 10rpx 50rpx;
        font-size: 38rpx;
        border-radius: 50rpx;
        color: $main-color;
        font-weight: bold;
        border: 4rpx solid $main-color;
      }
    }

  }
}
</style>
